import { debounce } from '@/utils'

export default {
    data() {
        return {
            sidebarElm: null
        }
    },
    mounted() {
        if (this.autoResize) {
            this.__resizeHandler = debounce(() => {
                if (this.chart) {
                    this.chart.resize()
                }
            }, 100)
            window.addEventListener('resize', this.__resizeHandler)
        }
        this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
        this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        if (this.autoResize) {
            window.removeEventListener('resize', this.__resizeHandler)
        }
        this.sidebarElm && this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        sidebarResizeHandler(e) {
            if (e.propertyName === 'width') {
                this.__resizeHandler()
            }
        }
    }
}
